<template>
  <div class="mod-login">
    <div class="tk-from">
      <h2 class="tk-from__title">{{isLogin?'登录':'注册'}}</h2>
      <Form ref="form" :model="form" :rules="rules">
        <FormItem prop="username">
          <Input type="text" v-model="form.username" placeholder="请输入用户名">
          <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input type="password" v-model="form.password" placeholder="请输入密码" @on-enter="submit">
          <Icon type="ios-lock-outline" slot="prepend"></Icon></Input>
        </FormItem>
        <FormItem prop="passwdCheck" v-if="!isLogin">
          <Input type="password" v-model="form.passwdCheck" placeholder="请再次输入密码">
          <Icon type="ios-lock-outline" slot="prepend"></Icon></Input>
        </FormItem>
        <FormItem class="log-gender" prop="gender" v-if="!isLogin" label="性别" :label-width="40">
          <RadioGroup v-model="form.gender">
            <Radio label="1">男</Radio>
            <Radio label="2">女</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem prop="mailNum" v-if="!isLogin">
          <Input type="email" v-model="form.mailNum" placeholder="请输入邮箱">
          <Icon type="ios-mail-outline" slot="prepend"></Icon></Input>
        </FormItem>
        <FormItem prop="telephone" v-if="!isLogin">
          <Input type="text" v-model="form.telephone" placeholder="请输入电话号码" :maxlength="11">
          <Icon type="ios-phone-portrait" slot="prepend"></Icon></Input>
        </FormItem>
        <FormItem prop="nickName" v-if="!isLogin">
          <Input type="text" v-model="form.nickName" placeholder="请输入昵称">
          <Icon type="md-person" slot="prepend"></Icon></Input>
        </FormItem>
        <FormItem prop="date" v-if="!isLogin">
          <DatePicker type="date" v-model="form.date" placeholder="请选择出生年月" style="width:100%" :editable="false"></DatePicker>
        </FormItem>
        <FormItem class="tk-from__submit">
          <Button v-if="isLogin" type="primary" class="tk-from__login" @click="submit" :loading="loading">登录</Button>
          <Button v-else type="primary" class="tk-from__login" @click="submit">确定</Button>
          <Button type="primary" class="tk-from__register" @click="changeIsLogin">{{isLogin?'注册':'返回登陆'}}</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
import { setToken } from "@/utils/auth";
import * as RULE from "@/utils/validate";
export default {
  name: "Login",
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.form.passwdCheck) {
          // 对第二个密码框单独验证
          this.$refs.form.validateField("passwdCheck");
        }
        callback();
      }
    };
    const validatePassCheck = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次密码输的不一样!"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      isLogin: true,
      form: this.init() || {},
      rules: {
        username: RULE.required("用户名不能为空"),
        password: [{ validator: validatePass, trigger: "blur" }],
        passwdCheck: [{ validator: validatePassCheck, trigger: "blur" }],
        telephone: RULE.phone()
      }
    };
  },
  created() {},
  methods: {
    init() {
      const form = {
        username: "",
        password: "",
        gender: "",
        mailNum: "",
        telephone: "",
        nickName: "",
        date: ""
      };
      return form;
    },
    changeIsLogin() {
      this.form = this.init();
      this.$refs.form.resetFields();
      this.isLogin = !this.isLogin;
    },
    async submit() {
      const result = await this.$refs.form.validate();
      if (!result) return;
      if (this.isLogin) return this.login();
      return this.register();
    },
    async login() {
      try {
        this.loading = true;
        await this.$http({
          method: "post",
          url: this.API.LOGIN,
          data: this.getParams()
        });
        setToken(Object.values(this.form).join());
        this.$Message.success("登陆成功");
        this.$router.push({ name: "Home" });
      } finally {
        this.loading = false;
      }
    },
    async register() {
      try {
        this.loading = true;
        await this.$http({
          method: "post",
          url: this.API.REGISTER,
          data: this.getParams()
        });
        this.$Message.success("注册成功");
        this.changeIsLogin();
      } finally {
        this.loading = false;
      }
    },
    getParams() {
      const params = { ...this.form };
      params.bornTime = (params.date && +params.date) || "";
      delete params.date;
      delete params.passwdCheck;
      return params;
    }
  }
};
</script>

<style lang="less">
html,
body,
#app {
  width: 100%;
  height: 100%;
}
.mod-login {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(./image/preview.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.tk-from {
  position: absolute;
  top: 150px;
  left: 50%;
  width: 300px;
  transform: translateX(-50%);
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}
.tk-from__title {
  margin-bottom: 15px;
  text-align: center;
  font-size: 20px;
  letter-spacing: 5px;
}
.tk-from__submit {
  text-align: center;
  .ivu-btn {
    margin: 0 15px;
  }
}
.log-gender {
  color: #fff;
  .ivu-form-item-label {
    color: #fff;
  }
}
</style>
